<template>
    <el-dialog v-model="dialogVisible" :title="title" width="300">
        <div class="RoleInformation">
            <span>角色名称</span>
            <el-input placeholder="请输入" style="width: 300px" v-model="addRoleData.name" />
        </div>
        <div class="RoleInformation">
            <span>角色介绍</span>
            <el-input placeholder="请输入" type="textarea" :row="120" v-model="addRoleData.intro" />
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onClick">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>


<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { addRoleApi, reviseRoleApi } from '../../api/RoleManagement'

const dialogVisible = ref(false)

const addRoleData = ref({})


const emit = defineEmits(['getRoleData'])

//储存的数据


const title = computed(() => {
    if (addRoleData.value._id) {
        return '编辑医生'
    }
    return '添加医生'
})

function onClick() {
    if (addRoleData.value._id) {
        reviseRole()
    } else {
        addRole()
    }
}


function addRole() {
    addRoleApi({
        ...addRoleData.value,
        group: "四组"
    }).then(res => {
        ElMessage({
            type: 'success',
            message: '添加成功',


        }), dialogVisible.value = false, emit('getRoleData')
    })
}


function reviseRole() {
    reviseRoleApi(addRoleData.value).then((res) => {
        if (res.code === 200) {
            ElMessage({ type: 'success', message: '修改成功' });
            dialogVisible.value = false;
            emit('getRoleData');
        }
    })
}


function open(formItem) {
    if (formItem) {
        addRoleData.value = { ...formItem }
    } else {
        addRoleData.value = ""
    }
    dialogVisible.value = true
}
defineExpose({ open })

</script>

<style scoped lang="scss">
.RoleInformation {
    margin-top: 10px;
    display: flex;
    white-space: nowrap;

    span {
        margin-right: 10px;
    }
}
</style>